<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #f0f0f0;
        }

        table tr td {
            border: 1px solid #000;
        }

        img {
            width: 45px;
            height: 45px;
        }
    </style>
    <script>
        const keys = {
            "id": "id",
            "name": "名称",
            "title": "称谓",
            "description": "描述",
            "attributes": "属性",
            "avatar": "头像",
            "sprites": "动画帧",
            "icon": "图标 "
        }
        function search() {
            let type = document.getElementById("type").value;
            let table = document.getElementById("table");
            let url = "/data/query?type=" + type;
            //删除table下所有子节点
            while (table.firstChild) {
                table.removeChild(table.firstChild);
            }

            //通过ajax请求url，并将返回结果写到table中
            let xhr = new XMLHttpRequest();
            let table_has_header = false;
            xhr.open("GET", url, true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let data = JSON.parse(xhr.responseText);
                    if (!table_has_header) {
                        let tr = document.createElement("tr");
                        for (let key in data[0]) {
                            if (data[0].hasOwnProperty(key)) {
                                let th = document.createElement("th");
                                th.innerHTML = keys[key];
                                tr.appendChild(th);
                                table_has_header = true;
                            }
                        }
                        let th = document.createElement("th");
                        th.innerHTML = "操作";
                        tr.appendChild(th);
                        table.appendChild(tr);
                    }
                    for (let i = 0; i < data.length; i++) {
                        let tr = document.createElement("tr");
                        for (let key in data[i]) {
                            if (data[i].hasOwnProperty(key)) {
                                let td = document.createElement("td");
                                if (key == "avatar" || key == "sprites" || key == "icon") {
                                    td.innerHTML = `<img src="${data[i][key]}" alt="">`;
                                } else
                                    td.innerHTML = data[i][key];
                                tr.appendChild(td);
                            }
                        }
                        let td = document.createElement("td");
                        td.innerHTML = `<button onclick="edit(${data[i].id})">编辑</button><button onclick="del(${data[i].id})">删除 </button>`;
                        tr.appendChild(td);
                        table.appendChild(tr);
                    }
                }
            }
        }
        function edit(_id) {
            let type = document.getElementById("type").value;
            if (type == 'characters') {
                window.location.href = "/update_character.html?type=" + type + "&id=" + _id;
            } else
                window.location.href = "/update.html?type=" + type + "&id=" + _id;

        }
        function del(_id) {
            let type = document.getElementById("type").value;
            let url = "/data/delete?type=" + type + "&id=" + _id;
            let xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // let data = JSON.parse(xhr.responseText);
                    // alert(xhr.responseText);
                    search();
                }
            }
        }

    </script>
</head>

<body onload="search()">
    <select name="type" id="type" onchange="search()">
        <option value="characters">角色</option>
        <option value="equipments">装备</option>
        <option value="items">物品</option>
        <option value="skills">技能</option>
        <option value="buffers">buffers</option>
    </select>
    <table id="table">
    </table>
</body>

</html>